<script lang="ts" setup name="app-slider">
interface Props {
    title?: string
    data: Array<any>
    ty?: number
    cid?: string
    pid?: string
    useCloudImg?: boolean
    path?: string
    showManCount?: boolean
    total?: number
}
defineOptions({
    name: 'AppSlideMulti',
})
const props = withDefaults(defineProps<Props>(), {
})

const { t } = useI18n()
const { bodyWidth } = storeToRefs(useWindowStore())

const pageInfo = reactive({
    // total: 0,
    pageSize: 3,
    //page: 1,
})
const sliderOuter = ref()
const gallery = ref()
const galleryClass = ref('')
const itemWidthPercent = computed(() => 1 / pageInfo.pageSize) // 百分比
const gapWidth = ref(0)

const cid = computed(() => props.cid ? props.cid : '')

const { x } = useScroll(gallery, { behavior: 'smooth' }) // , isScrolling, arrivedState, directions

// 判断是否为二维数组
const isTwoDimensional = computed(() => {
  return props.data.length > 0 && Array.isArray(props.data[0])
})
// 获取最长一行的长度（兼容二维数组）
const maxLineLength = computed(() => {
  if (!props.data || props.data.length === 0) return 0
  
  if (isTwoDimensional.value) {
    const lengths = props.data.map(row => row.length)
    return Math.max(...lengths)
  } else {
    return props.data.length
  }
})
const pageWidth = computed(() => deSignToRealPix(351))
const itemWidth = computed(()=> deSignToRealPix(117))
const maxX = computed(() => {
    return (maxLineLength.value - pageInfo.pageSize) * itemWidth.value
})
function nextPage() {
    const temp = x.value + pageWidth.value
    if (temp > maxX.value) {
        x.value = maxX.value
    } else {
        x.value = temp
    }
}
function prevPage() {
    const temp = x.value - pageWidth.value
    if (temp < 0)
        x.value = 0
    else
        x.value = temp
        
}

function onTitleClick() {
    if (props.path)
        i18nNavigateTo(props.path)
}
function isApproximatelyEqual(a: number, b:number, tolerance = 1) {
    return Math.abs(a - b) <= tolerance;
}
onActivated(() => {
    gallery.value?.scrollTo({ left: x.value, behavior: 'instant' })
})
watchEffect(() => {
    console.log('x:', x.value)
})
</script>

<template>
    <div class="mb-4 slide-multi">
        <div class="mt-2 flex h-8 items-center mb-1.5 sm:mt-6">
            <div class="w-full flex items-center justify-between text-xs font-bold">
                <template v-if="$slots.title">
                    <slot name="title">
                        {{ title }}
                    </slot>
                </template>
                <div v-else class="flex items-center text-sm">{{ title }}</div>
                <div class="flex">
                    <BaseButton @click="onTitleClick"
                        class=" flex w-[3.375rem] h-7 p-0 items-center rounded-sm  !font-bold text-xs  inactive"
                        type="secondary">{{
                        $t('all') }}
                        <BaseIcon name="uni-arrow-right" class="text-sm ml-1" />
                    </BaseButton>
                    <div class="ml-2 flex gap-x-1 ">
                        <BaseButton type="secondary" class="h-7 w-7 p-0 rounded-sm" :disabled="isApproximatelyEqual(x,0)"
                            @click="prevPage">
                            <BaseIcon name="uni-arrow-right" class="rotate-180 text-sm" />
                        </BaseButton>
                        <BaseButton type="secondary" class="h-7 w-7 p-0 rounded-sm" :disabled="isApproximatelyEqual(x,maxX)"
                            @click="nextPage">
                            <BaseIcon name="uni-arrow-right" class="text-sm" />
                        </BaseButton>
                    </div>
                </div>
            </div>

        </div>
        <div ref="gallery" v-if="data && data.length > 0"
            style="--grid-gap: .25rem; --grid-padding: .875rem;; --aspect-ratio: 0.75;"
            class="smooth-scroll smooth-list snap-x relative snap-mandatory  overflow-x-scroll overflow-y-hidden scroll-smooth hide-scroll   "
            :class="isTwoDimensional ? 'flex flex-col gap-1' : 'grid grid-flow-col grid-col-n gap-1'"
            >
             <!-- 一维数组渲染 -->
            <template v-if="!isTwoDimensional">
                <BaseGameItem v-for="(item, i) in data" 
                    :game-info="cid === '5' ? undefined : item"
                    :supplier-info="cid === '5' ? item : undefined" 
                    :key="`item-${i}`">
                </BaseGameItem>
            </template>
            
            <!-- 二维数组渲染 -->
            <template v-else>
                <div v-for="(row, rowIndex) in data" 
                    :key="`row-${rowIndex}`"
                    class=" grid grid-flow-col grid-col-n gap-1">
                    <BaseGameItem v-for="(item, colIndex) in row" 
                        :key="`row-${rowIndex}-col-${colIndex}`"
                        :game-info="cid === '5' ? undefined : item"
                        :supplier-info="cid === '5' ? item : undefined">
                    </BaseGameItem>
                </div>
            </template>
        </div>
    </div>

</template>

<style lang="scss" scoped>
.slide-multi {
    --tg-base-icon-color: var(--color-text-white-0);
}

.smooth-list {
    gap: var(--grid-gap);
}

.grid-col-n {
    --grid-gap: .25rem;
    --grid-column: 3;
    --aspect-ratio: 1;
    --grid-side: 2;
    --grid-cols: var(--grid-column);
    --item-width: calc((100% - var(--grid-gap) * (var(--grid-cols) - 1)) / var(--grid-cols));
    grid-template-columns: repeat(auto-fill, var(--item-width));
    grid-auto-columns: var(--item-width);
}
</style>
